<template>
  <el-dialog
    :visible.sync="centerDialogVisible"
    :title="title"
    append-to-body
    width="500px"
    @close="emitClose">
    <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="100px" class="detail-wapper__form">
      <el-form-item label="签到天数" prop="days">
        <el-input v-model="formData.days" :maxlength="20" placeholder="请填写签到天数"/>
      </el-form-item>
      <el-form-item label="奖励类型" prop="type">
        <el-select v-model="formData.type" placeholder="请选择">
          <el-option
            v-for="(item, index) in typeOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="数    量" prop="num">
        <el-input v-model="formData.num" :maxlength="20" placeholder="请填写数量"/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="toRecharge('ruleForm')">确 认</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { REHGEX_SUB_NUM } from '@/common/check'
import { signRewardAdd, signRewardUpdate } from '@/api/sign-reward'
export default {
  name: 'SignRewardDialog',
  props: {
    openType: {
      type: [String],
      default: 'create'
    },
    sourceData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    var { days = '', num = '', type = 1 } = this.$props.sourceData || {}
    return {
      centerDialogVisible: true,
      typeOptions: [
        {
          label: '房卡',
          value: 1
        },
        {
          label: '金币',
          value: 2
        }
      ],
      formData: {
        days,
        type,
        num
      },
      rules: {
        days: [
          { required: true, message: '请填写签到天数', trigger: 'blur' },
          { pattern: REHGEX_SUB_NUM, message: '请填写正确的签到天数', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择充值类型', trigger: 'chang' }
        ],
        num: [
          { required: true, message: '请填写充值数量', trigger: 'blur' },
          { pattern: REHGEX_SUB_NUM, message: '请填写正确的数量', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    title() {
      var { openType = 'create' } = this.$props
      return openType === 'update' ? '修改签到奖励' : '添加签到奖励'
    }
  },
  methods: {
    _beforeCheck(formName) {
      return new Promise(resolve => {
        this.$refs[formName].validate((valid) => {
          resolve(valid)
        })
      })
    },
    closeDialog() {
      this.centerDialogVisible = false
    },
    async toRecharge(formName) {
      const ERR_MSG = '操作失败'
      var check = await this._beforeCheck(formName)
      var {
        days,
        num,
        type
      } = this.formData
      var { sourceData: { id = '' } = {}, openType = 'create' } = this.$props || {}
      if (check) {
        var promiseFn = openType === 'create' ? signRewardAdd({ num, type, days }, ERR_MSG) : signRewardUpdate({ id, num, type, days }, ERR_MSG)
        promiseFn.then(() => {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.closeDialog()
          this.$emit('success')
        }).catch(msg => {
          this.$message({
            type: 'error',
            message: msg
          })
        })
      }
    },
    emitClose() {
      setTimeout(() => {
        this.$emit('close')
      }, 500)
    }
  }

}
</script>

